<!-- 表格组件 -->
<template>
  <div>
    <el-card class="box-card" style="margin:30px 0;">
      <el-table
        class="tables"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        :default-sort="{ prop: 'date', order: 'descending' }"
        @selection-change="handleSelectionChange"
      >
        <slot>
          <el-table-column type="selection" width="55" hidden></el-table-column>
          <el-table-column
            type="index"
            :index="indexSort"
            sortable
            align="center"
            label="#"
            width="50"
          />
        </slot>
        <slot name="tableContent"></slot>
      </el-table>

      <div style="margin-top: 20px">
        <el-button @click="toggleSelection()">取消选择</el-button>
      </div>

      <slot name="foot">
        <el-pagination
          style="float:right;margin:15px 0;"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[4, 5, 8, 10, 15]"
          :page-size="pageSizes"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </slot>
    </el-card>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
    },
    currentPage: {
      type: Number, // 第几页
    },
    pageSizes: {
      type: Number, // 每页几个
    },
    pages: {
      type: Number, // 每页几个
    },
    total: {
      type: Number,
    },
    multipleSelection: {
      tyoe: Array,
    },
  },

  methods: {
    // 多选
    handleSelectionChange(val) {
      this.$emit('handleSelectionChange', val)
    },
    // 取消全选
    toggleSelection() {
      this.$refs.multipleTable.clearSelection()
      this.$emit('toggleSelection')
    },
    // 每页显示数量改变
    handleSizeChange(val) {
      this.$emit('handleSizeChange', val)
    },
    // 当前页面改变
    handleCurrentChange(val) {
      this.$emit('handleCurrentChange', val)
    },
    indexSort(index) {
      return (this.currentPage - 1) * this.pageSizes + index + 1
    },
  },
}
</script>
<style scoped>
.tables {
  margin-top: 0.625rem;
}
</style>
